<style>
  .layui-form-label.required:before {
    /* 这种写法也可以*/
    content: " *";
    color: red;
  }
  .open-form .layui-form-label {
    width: 110px;
  }
  .open-form .layui-input-block {
    margin-left: 140px;
  }
</style>
<!-- 表单弹窗 -->
<form lay-filter="modelDrawForm" class="layui-form modelDrawForm open-form">
  <div class="open-model" id="modelDrawFormContent">
    <div class="open-auto">
      <input type="hidden" name="id" />
      <input type="hidden" name="code" />
      <div class="layui-form-item layui-row">
        <label class="layui-form-label required">图纸名称：</label>
        <div class="layui-input-block">
          <input name="name" type="text" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <label class="layui-form-label required">备注：</label>
        <div class="layui-input-block">
          <input name="remark" type="text" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item layui-row">
        <label class="layui-form-label required">产品图纸文件：</label>
        <div class="layui-input-block">
          <button class="layui-btn" type="button" id="addAttachment">添加附件</button>
          <!-- <div id="addHeaderPdf" class="companyFormPhotos"></div> -->
          <div id="drawImage" style="width: 100%; height: 100%; margin-top: 20px"></div>
          <input name="fileUrl" id="fileUrl" type="hidden" class="layui-input" lay-verify="fileUrl" />
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn" lay-submit lay-filter="bookSubmit" type="button">提交</button>
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
    </div>
  </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "admin", "laytpl", "config", "upload"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var admin = layui.admin;
    var form = layui.form;
    var upload = layui.upload;
    var config = layui.config;
    var table = layui.table;
    const nowData = { ...parentData };
    let data = nowData?.data;

    if (data?.fileUrl) {
      $("#drawImage").html('<img style="width: 100%;height: 100%" src="' + data.fileUrl + '"/>');
    }
    if (data && data.id) {
      console.log(nowData);
      form.val("modelDrawForm", data);
    }
    if (nowData.eventName == "detail") {
      admin.setFormDisable("#modelDrawFormContent", true);
      $("#addAttachment").hide();
    }

    upload.render({
      elem: "#addAttachment",
      url: config.upload_url + "uploadFile",
      data: {},
      accept: "file",
      exts: "jpg|png",
      headers: { Authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          form.val("modelDrawForm", {
            fileUrl: res.data.url
          });
          $("#drawImage").html('<img style="width: 100%;height: 100%" src="' + res.data.url + '"/>');
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg || "上传失败", { icon: 2 });
        }
      }
    });

    // 保存
    form.on("submit(bookSubmit)", function (d) {
        console.log(nowData);
        
      const formData = { ...d.field };
      formData.drawId = nowData.drawId;
      formData.productDetailId = nowData.productDetailId;
      if (nowData.eventName == "add") {
        admin.req(
          "enterprise/res/admin/proMoldDraw/addModelDraw",
          JSON.stringify(formData),
          function (res) {
            layer.closeAll("loading");
            if (res.code === 200) {
              layer.msg(res.msg, { icon: 1 });
              layer.close(nowData.zindex);
              table.reload("modelDrawTable");
            } else {
              layer.msg(res.msg, { icon: 2 });
            }
          },
          "POST",
          true,
          "application/json; charset=utf-8"
        );
      } else if (nowData.eventName == "edit") {
        admin.req(
          "enterprise/res/admin/proMoldDraw/updateModelDraw",
          JSON.stringify(formData),
          function (res) {
            console.log(res);
            layer.closeAll("loading");
            if (res.code === 200) {
              layer.msg(res.msg, { icon: 1 });
              layer.close(nowData.zindex);
              table.reload("modelDrawTable");
            } else {
              layer.msg(res.msg, { icon: 2 });
            }
          },
          "PUT",
          true,
          "application/json; charset=utf-8"
        );
      }
    });
    // 查看附件
    function showViewAttachmentModel(data) {
      admin.open({
        type: 1,
        area: ["60%", "80%"],
        offset: "65px",
        title: "查看附件",
        content: $("#viewAttachmentHtml").html(),
        success: function () {
          if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
            PDFObject.embed(data.attachment, "#example1");
          } else {
            var attachmentHtml = "";
            data.attachment.split(",").forEach((attachmentUrl, index) => {
              attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
            });
            $("#example1").html(attachmentHtml);
          }
        }
      });
    }
  });
</script>
